<template>
    <div class="search-bar">
        <div class="search-container">
            <!-- 主搜索输入框 -->
            <div class="search-input">
                <svg class="search-icon" viewBox="0 0 24 24">
                    <path
                        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                </svg>
                <input type="text" v-model="searchQuery" placeholder="输入目的地、景点或活动" @keyup.enter="handleSearch">
                <button v-if="searchQuery" class="clear-btn" @click="clearSearch">
                    <svg viewBox="0 0 24 24">
                        <path
                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                    </svg>
                </button>
            </div>

            <!-- 高级筛选按钮 -->
            <button class="filter-btn" @click="toggleFilters">
                <svg viewBox="0 0 24 24">
                    <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
                </svg>
                <span>筛选</span>
            </button>

            <!-- 搜索按钮 -->
            <button class="search-btn" @click="handleSearch">
                搜索
            </button>
        </div>

        <!-- 高级筛选面板 -->
        <div class="advanced-filters" v-if="showFilters">
            <div class="filter-section">
                <h4>旅行日期</h4>
                <div class="date-picker">
                    <input type="date" v-model="startDate" placeholder="开始日期">
                    <span>至</span>
                    <input type="date" v-model="endDate" placeholder="结束日期">
                </div>
            </div>

            <div class="filter-section">
                <h4>旅行类型</h4>
                <div class="filter-options">
                    <label v-for="(type, index) in travelTypes" :key="index">
                        <input type="checkbox" v-model="selectedTypes" :value="type.value">
                        {{ type.label }}
                    </label>
                </div>
            </div>

            <div class="filter-section">
                <h4>价格范围</h4>
                <div class="price-range">
                    <input type="range" min="0" max="10000" step="500" v-model="maxPrice">
                    <span>¥0 - ¥{{ maxPrice }}</span>
                </div>
            </div>

            <div class="filter-actions">
                <button class="reset-btn" @click="resetFilters">重置</button>
                <button class="apply-btn" @click="applyFilters">应用筛选</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'SearchBar',
        data() {
            return {
                searchQuery: '',
                showFilters: false,
                startDate: '',
                endDate: '',
                selectedTypes: [],
                maxPrice: 5000,
                travelTypes: [
                    { value: 'family', label: '家庭游' },
                    { value: 'couple', label: '情侣游' },
                    { value: 'solo', label: '独自旅行' },
                    { value: 'adventure', label: '冒险之旅' },
                    { value: 'luxury', label: '奢华度假' }
                ]
            }
        },
        methods: {
            handleSearch() {
                if (!this.searchQuery.trim()) return

                const filters = {
                    query: this.searchQuery,
                    startDate: this.startDate,
                    endDate: this.endDate,
                    types: this.selectedTypes,
                    maxPrice: this.maxPrice
                }

                this.$emit('search', filters)
            },
            clearSearch() {
                this.searchQuery = ''
                this.$emit('clear')
            },
            toggleFilters() {
                this.showFilters = !this.showFilters
            },
            applyFilters() {
                this.showFilters = false
                this.handleSearch()
            },
            resetFilters() {
                this.startDate = ''
                this.endDate = ''
                this.selectedTypes = []
                this.maxPrice = 5000
            }
        }
    }
</script>

<style scoped>
    .search-bar {
        width: 100%;
        margin: 0 auto;
        position: relative;
        font-size: 14px;
    }

    .search-container {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 50px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        height: 46px;
    }

    .search-input {
        flex: 1;
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 20px;
    }

    .search-icon {
        width: 20px;
        height: 20px;
        fill: #636e72;
        margin-right: 12px;
    }

    .search-input input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 1rem;
        height: 100%;
        padding: 0;
        color: #2d3436;
    }

    .search-input input::placeholder {
        color: #b2bec3;
    }

    .clear-btn {
        background: none;
        border: none;
        padding: 0;
        margin-left: 10px;
        cursor: pointer;
    }

    .clear-btn svg {
        width: 18px;
        height: 18px;
        fill: #b2bec3;
        transition: all 0.2s;
    }

    .clear-btn:hover svg {
        fill: #636e72;
    }

    .filter-btn {
        display: flex;
        align-items: center;
        background: none;
        border: none;
        padding: 0 20px;
        height: 100%;
        cursor: pointer;
        color: #636e72;
        font-size: 0.9rem;
        border-left: 1px solid #f0f3f5;
        transition: all 0.2s;
    }

    .filter-btn svg {
        width: 18px;
        height: 18px;
        fill: #636e72;
        margin-right: 8px;
    }

    .filter-btn:hover {
        color: #4a6bff;
    }

    .filter-btn:hover svg {
        fill: #4a6bff;
    }

    .search-btn {
        background: #4a6bff;
        color: white;
        border: none;
        height: 100%;
        padding: 0 30px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .search-btn:hover {
        background: #3a5bef;
    }

    /* 高级筛选面板 */
    .advanced-filters {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }

    .filter-section {
        margin-bottom: 20px;
    }

    .filter-section h4 {
        margin-bottom: 12px;
        color: #2d3436;
        font-size: 0.95rem;
    }

    .date-picker {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .date-picker input {
        flex: 1;
        padding: 10px 12px;
        border: 1px solid #dfe6e9;
        border-radius: 6px;
        font-size: 0.9rem;
    }

    .filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .filter-options label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        color: #636e72;
        cursor: pointer;
        padding: 6px 12px;
        background: #f8f9fa;
        border-radius: 20px;
        transition: all 0.2s;
    }

    .filter-options label:hover {
        background: #f1f3f5;
    }

    .filter-options input {
        margin-right: 6px;
    }

    .price-range {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .price-range input[type="range"] {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: #dfe6e9;
        outline: none;
        -webkit-appearance: none;
    }

    .price-range input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #4a6bff;
        cursor: pointer;
    }

    .price-range span {
        font-size: 0.9rem;
        color: #636e72;
        text-align: right;
    }

    .filter-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }

    .reset-btn,
    .apply-btn {
        padding: 8px 20px;
        border-radius: 6px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .reset-btn {
        background: none;
        border: 1px solid #dfe6e9;
        color: #636e72;
    }

    .reset-btn:hover {
        background: #f8f9fa;
    }

    .apply-btn {
        background: #4a6bff;
        color: white;
        border: none;
    }

    .apply-btn:hover {
        background: #3a5bef;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .search-container {
            height: 50px;
            border-radius: 25px;
        }

        .search-input {
            padding: 0 15px;
        }

        .filter-btn span {
            display: none;
        }

        .filter-btn {
            padding: 0 15px;
        }

        .search-btn {
            padding: 0 20px;
        }

        .advanced-filters {
            padding: 15px;
        }
    }
</style>